<!--
 * @Description: 标签/关键词选择器组件
 * @Author: Kerwin
 * @Date: 2024-09-09 09:46:16
 * @LastEditTime: 2024-09-09 17:50:17
 * @LastEditors:  Please set LastEditors
-->

<template>
    <view class="c_container">
        <u-popup mode="bottom" v-model="show" :border-radius="'20'" :mask="true">
            <view class="c_main">
                <u-search :show-action="true" action-text="搜索" :animation="true" @search="onSearch"
                    @custom="onSearch"></u-search>
                <scroll-view scroll-y="true" class="scroll" scroll-with-animation @scrolltolower="lower">
                    <hy-loading v-show="tags.length === 0 && !pageData.finished" :size="30" style="margin-top: 100rpx;" />
                    <view v-show="tags.length > 0">
                        <view class="item able" v-for="(s, index) in tags" :key="index" @click="onClick(index, s)">
                            <view class="name">#{{ s.name }}</view>
                        </view>
                    </view>
                    <view class="endTips" v-if="pageData.finished">没有更多了~</view>
                </scroll-view>
            </view>
        </u-popup>
    </view>
</template>
  
<script setup lang="ts">
import { ref, reactive, watch, } from 'vue';
import { useUserStore } from '@/store'
import { socialApi } from '@/api';

const emit = defineEmits(['onConfirm'])
const userStore = useUserStore()
const props = withDefaults(
    defineProps<{
        isBack?: boolean
        device?: any
    }>(),
    {
        isBack: true,
        device: {}
    }
)
const tags = ref<{ name: string, value: string }[]>([])
const show = ref(false)
const type = ref('')
const open = (tagType: string) => {
    show.value = true
    if (tagType !== type.value) {
        type.value = tagType
        reset()
    }
    if (!tags.value.length) {
        pageData.finished = false
        getData()
    }
}
const pageData = reactive({
    pageSize: 30,
    pageIndex: 1,
    finished: false
})
const getData = async (keywords?: string) => {
    if (pageData.finished) return
    const { data } = await socialApi.userDetailTagList({
        name: keywords ?? '',
        type: type.value,
        pageSize: pageData.pageSize,
        pageIndex: pageData.pageIndex,
    })
    if (keywords) {
        tags.value = data.records
    } else {
        tags.value.push(...data.records)
    }
    if (data.current < data.pages) {
        pageData.pageIndex += 1
    } else {
        pageData.finished = true
    }
}
const onClick = (i: number, s: any) => {
    emit('onConfirm', s)
    show.value = false
}
const lower = (e: any) => {
    getData()
}
const keywords = ref('')
const onSearch = async (value: string) => {
    keywords.value = value
}
const reset = () => {
    tags.value = []
    pageData.finished = false
    pageData.pageIndex = 1
}
watch(keywords, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        reset()
        getData(newValue)
    }
})
defineExpose({ open })

</script>
  
<style lang="scss" scoped>
.c_container {
    .c_main {
        padding: 40rpx 40rpx calc(env(safe-area-inset-bottom) + 40rpx) 40rpx;

        .tit {
            font-size: 30rpx;
            text-align: center;
            font-weight: bold;
            margin-bottom: 40rpx;
        }

        .desc {
            margin-top: 20rpx;
            margin-bottom: 50rpx;
        }

        .inpt {
            display: flex;
            justify-content: center;
            margin-bottom: 50rpx;
        }

        .endTips {
            text-align: center;
            font-size: 24rpx;
            color: #666;
            margin-top: 20rpx;
        }
    }

}

.scroll {
    width: 100%;
    height: 750rpx;
    margin-top: 24rpx;
}

.item {
    // width: 30%;
    // border: 1px solid #f5f5f5;
    // border-radius: 10rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 60rpx;
    color: #bbb;

    &.able {
        // background-color: #f5f5f5;
        color: #333;
    }

    .name {
        font-size: 28rpx;
        margin-bottom: 10rpx;
        width: 100%;
    }
}
</style>
  